<template>
    <div class="baking">
        <div class="baking-banner">
            <div class="baking-img">
                <img src="../../static/images/konw3.jpg" alt="">
            </div>
            <div class="baking-foot">
                <p @click="konw">咖啡烘培</p>
            </div>
            <div class="baking-shadow"></div>
            <div class="baking-title">
                <p>咖啡烘培</p>
            </div>

        </div>
    </div>
</template>
<style lang="scss" scoped>
.baking {
    margin-top: .4rem;

    .baking-banner {
        position: relative;
        width: 90%;
        margin: 0 auto;

        .baking-img {
            width: 100%;
            height: 13.3333rem;

            img {
                width: 100%;
                height: 100%;
                transition: all .5s;
            }

            overflow: hidden;
        }

        .baking-foot {
            width: 100%;
            height: 4rem;
            background-color: #fff;
            box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.12);

            p {
                font-size: 19px;
                padding-left: 1.3333rem;
                line-height: 4rem;
            }
        }

        .baking-shadow {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #000;
            width: 100%;
            height: 13.4rem;
            opacity: .2;
            display: none;
        }

        .baking-title {
            position: absolute;
            top: .5rem;
            left: 0;
            background-color: #C2A661;
            color: #fff;
            width: 0;
            height: 2.5rem;
            font-size: 15px;
            line-height: 2.4rem;
            padding-left: .8rem;
            overflow: hidden;
            transition: all .3s;

        }
    }
}
</style>
<script lang="ts" setup>
import { reactive, ref, defineComponent, onMounted, onUpdated } from "vue";
import router from "@/router";

// 挂载后调用
onMounted(() => {
    const bakingImg: HTMLDivElement = document.getElementsByClassName('baking-img')[0] as HTMLDivElement
    const Img: HTMLImageElement = document.querySelector('.baking-img img') as HTMLImageElement
    const bakingTitle: HTMLDivElement = document.getElementsByClassName('baking-title')[0] as HTMLDivElement;
    const bakingShadow: HTMLDivElement = document.getElementsByClassName('baking-shadow')[0] as HTMLDivElement;
    bakingImg.addEventListener('touchstart', (e) => {
        bakingTitle.style['width'] = '6rem';
        bakingShadow.style['display'] = 'block';
        Img.style['transform'] = 'scale(1.2)';
        //解决移动端长按时出现右键菜单
        e.preventDefault();
    })
    bakingImg.addEventListener('touchend', () => {
        bakingTitle.style['width'] = '0';
        bakingShadow.style['display'] = 'none';
        Img.style['transform'] = 'scale(1)';
    })
})

const konw = () => {
    router.push({
        path: '/baking'
    })
}

</script>